
<template>

    <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center
        custom-class="RegularPop dataSource" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
            <h1>基础信息</h1>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="配置名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入配置名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库配置别名">
                        <el-input v-model="form.dbAliasKey" placeholder="请输入数据库配置别名" clearable />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="模块名" prop="moduleName">
                        <el-select v-model="form.moduleName" placeholder="模块名" clearable>
                            <el-option v-for="dict in module_name" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库使用类型" prop="dbUseType">
                        <el-select v-model="form.dbUseType" placeholder="数据库使用类型" clearable>
                            <el-option v-for="dict in db_use_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>

                </el-col>

            </el-row>
            <el-row>

                <el-col :span="12">
                    <el-form-item label="主从模式" prop="masterSlave">
                        <el-select v-model="form.masterSlave" placeholder="主从模式 " clearable>
                            <el-option v-for="dict in master_slave" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="集群数据库编号" prop="dbNum">
                        <el-input v-model="form.dbNum" placeholder="集群数据库编号" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :span="12">
                    <el-form-item label="是否私有库" prop="privateDb">
                        <el-radio-group v-model="form.privateDb" @change="billingModelChange">
                            <el-radio v-for="dict in private_db" :key="dict.value" :label="dict.value"
                                :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="isPrivate">
                    <el-form-item label="租户" prop="tenantId">
                        <el-select v-model="form.tenantId" filterable placeholder="选择租户" @change="tenantChange">
                            <el-option v-for="(item, index) in tenantList" :key="index" :label="item" :value="index" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库Key:">
                        <span>{{ form.tenantId }}</span>
                        <span>:{{ form.moduleName }}</span>
                        <span>:{{ form.dbUseType }}</span>
                        <span>:{{ form.masterSlave }}</span>
                        <span v-if="form.dbNum && form.dbNum != 0">_{{ form.dbNum }}</span>
                    </el-form-item>

                </el-col>
            </el-row>

            <h1>数据内容</h1>
            <base-codemirror ref="yamlRef" v-model="code" mode="yaml" style="height:400px" :lint="true"
                :styleActiveLine='true' :autoRefresh="true" :readonly="false" @change="handleValueChange">
            </base-codemirror>
            <!-- <el-button @click="btnClick">点击</el-button> -->
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">返回</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import BaseCodemirror from '@/components/YamlEditor/index'
import { getTenantDic } from '@/api/tenant/tenant'
import { addDataSource, updateDataSource } from '@/api/system/dataSource'
const { proxy } = getCurrentInstance();
const { db_use_type, master_slave, module_name, private_db } = proxy.useDict("db_use_type", "master_slave", 'module_name', 'private_db');
const yamlRef = ref(null)
const code = ref('')
const tenant = ref("")
const tenantList = ref({});
const visible = ref(false);
const title = ref("");
const isPrivate = ref(true)
const data = reactive({
    form: {
        moduleName: 'xczx',
        masterSlave: '0',
        dbUseType: '0',
        privateDb: '1'
    },
    rules: {
        name: [{ required: true, message: "配置名称不能为空", trigger: "blur" }],
        tenantId: [{ required: true, message: "租户不能为空", trigger: "blur" }],
        moduleName: [{ required: true, message: "模块名不能为空", trigger: "blur" }],
        dbUseType: [{ required: true, message: "数据库使用类型不能为空", trigger: "blur" }],
        masterSlave: [{ required: true, message: "主从模式不能为空", trigger: "blur" }],
        dbNum: [{
            pattern: /^[0-9]*$/, //数字
            message: "集群数据库编号只能填写数字",
            trigger: "blur",
        }],
        privateDb: [{ required: true, message: "是否私有库不能为空", trigger: "blur" }],
        code: [{ required: true, message: "内容不能为空", trigger: "blur" }]
    }
})
const { form, rules } = toRefs(data);
const btnClick = () => {
    yamlRef.value.checkYaml(code).then(() => {
        console.log(code.value)
    })
}
getTenantDic(tenant.value).then(res => {
    console.log('租户字典', res)
    if (res.code == 200) {
        tenantList.value = res.data
    }

})
function tenantChange(val) {
    console.log('租户id', val)
    form.value.tenantId = val
    console.log('租户id', val)
}
/** 重置操作表单 */
const reset = () => {
    code.value = ""
    form.value = {
        moduleName: 'xczx',
        masterSlave: '0',
        dbUseType: '0',
        privateDb: '1'
    };
    proxy.resetForm("ruleFormRef");
}
const add = () => {
    visible.value = true;
    title.value = "新增数据源";
    reset();
}
const edit = (row) => {
    console.log('修改', row)
    reset();
    visible.value = true;
    title.value = "修改数据源";
    form.value = Object.assign({}, row);
    code.value = row.content;
    form.value.tenantId = row.tenantId + '';
    form.value.dbUseType = row.dbUseType + '';
    form.value.masterSlave = row.masterSlave + '';
    form.value.privateDb = row.privateDb + '';
    if (form.value.privateDb == '1') {
        isPrivate.value = true
    }

}
/** 取消按钮 */
function cancel() {
    visible.value = false;
    reset();
};
function billingModelChange(val) {
    console.log('val', val)
    if (val == 0) {
        isPrivate.value = false
    } else {
        isPrivate.value = true

    }
}

//提交
function submitForm() {
    proxy.$refs['ruleFormRef'].validate(valid => {
        if (valid) {
            form.value.content = code.value;
            console.log('form.value.content', form.value.content);
            if (form.value.id != undefined) {

                updateDataSource(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    visible.value = false;
                    proxy.$emit('refresh');
                }).catch(err => {
                    console.log('err', err);
                })
            } else {

                addDataSource(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    visible.value = false;
                    proxy.$emit('refresh')
                })
            }
        } else {
            proxy.$modal.msgError("提交失败！");
            return false;
        }
    })
}
defineExpose({
    add, edit
});




</script>

<style scoped>
</style>
